<template>
  <div class="container" ref="container">
    <div class="header">
      <div class="header-left">
        <img class="hl-logo" src="@/assets/images/logo-1.png" alt="" />
        <img class="hl-text" src="@/assets/images/text.png" alt="" />
        <span class="hl-date">{{ endVal }}</span>
      </div>
      <div class="header-right">
        <div class="back-btn" @click="handleTo('/')">查看全部</div>
        <v-music :src="musicSrc"></v-music>
      </div>
    </div>
    <div id="chart" class="chart-container" ref="chart"></div>
  </div>
</template>

<script>
// @ is an alias to /src

import { Chart } from "frappe-charts/dist/frappe-charts.min.esm";
import vMusic from "@/components/music.vue";
const datas = require("../../static/data/defi.json");
const events = require("../../static/data/events.json");
const moment = require("moment");
import { $tools } from "../utils/tools";
export default {
  name: "charts",
  components: {
    vMusic,
  },
  data() {
    return {
      nowDate: new Date(),
      musicSrc: "",
      spotSrc: require("../assets/images/icon/spot-green.png"),
      datas: datas.data.hits.reverse(),
      startVal: "2018/01/01",
      endVal: "2018/01/05",
      timers: null,
    };
  },
  computed: {
    spotBase() {
      var url = "";
      var _this = this;
      var image = new Image();
      image.src = this.spotSrc;
      image.onload = function () {
        var base64 = _this.getBase64Image(image);
        return (url = `image://${base64}`);
      };
      return url;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.resize();
      window.addEventListener("resize", this.resize);
    });
    this.init();
  },
  methods: {
    init() {
      var labels = [];
      var datas = [];
      this.datas.forEach((item) => {
        var start = new Date("2018-01-01");
        var startTimes = start.getTime();
        if (item.timestamp * 1000 >= startTimes) {
          labels.push(moment(item.timestamp * 1000).format("YYYY/MM/DD"));
          datas.push(parseInt(item.lockedUsd));
        }
      });
      const data = {
        labels,
        datasets: [
          {
            name: "Another Set",
            type: "line",

            values: datas,
          },
        ],
      };

      const chart = new Chart("#chart", {
        // or a DOM element,
        // new Chart() in case of ES6 module with above usage
        title: "My Awesome Chart",
        data: data,
        type: "line", // or 'bar', 'line', 'scatter', 'pie', 'percentage'
        height: 250,
        colors: ["#7cd6fd", "#743ee2"],
        lineOptions: {
          hideDots: 1,
          spline: 1,
        },
      });
    },

    randomData() {
      this.now = new Date(+this.now + this.oneDay);
      this.value = this.value + Math.random() * 21 - 10;
      return {
        name: this.now.toString(),
        value: [
          [
            this.now.getFullYear(),
            this.now.getMonth() + 1,
            this.now.getDate(),
          ].join("/"),
          Math.round(this.value),
        ],
      };
    },
    resize() {
      var width = window.innerWidth,
        height = window.innerHeight,
        $wrapper = document.getElementById("app"),
        style = "";
      if (width >= height) {
        // 横屏
        style += "width:" + width + "px;"; // 注意旋转后的宽高切换
        style += "height:" + height + "px;";
        style += "-webkit-transform: rotate(0); transform: rotate(0);";
        style +=
          "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      } else {
        // 竖屏
        style += "width:" + height + "px;";
        style += "height:" + width + "px;";
        style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
        // 注意旋转中点的处理
        style +=
          "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      }
      $wrapper.style.cssText = style;
    },
  },
};
</script>
<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 37px;
}
.header .header-left {
  display: flex;
  align-items: center;
}
.header .header-left .hl-logo {
  height: 4vmin;
  width: auto;
  margin-left: 5vmin;
}
.header .header-left .hl-text {
  height: 5vmin;
  width: auto;
  margin-left: 5vmin;
}
.header .header-left .hl-date {
  font-size: 4vmin;
  color: #939393;
  margin-left: 5vmin;
}
.header .header-right {
  display: flex;
  align-items: center;
  padding-right: 6vmin;
}
.header .header-right .back-btn {
  display: inline-block;
  padding: 0 4vmin;
  margin-right: 4vmin;
  height: 7vmin;
  line-height: 7vmin;
  border-radius: 6.5vmin;
  font-size: 3vmin;
  color: #fff;
  background: linear-gradient(to right, #f375ff, #702ffb);
}

.chart-container {
  height: calc(100% - 37px);
  box-sizing: border-box;
  padding-bottom: 10px;
}
@media screen and (orientation: portrait) {
  /* 竖屏 */
}
@media screen and (orientation: landscape) {
  /* 横屏 */
}
</style>
